<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>共享米宝管理后台 - 用户管理</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.12/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../assets/css/custom.css">
</head>
<body class="bg-gray-100">
    <div class="admin-container flex">
        <!-- Sidebar -->
        <div class="w-64 bg-gray-800 min-h-screen flex-shrink-0">
            <div class="p-4 text-white">
                <div class="flex items-center mb-6">
                    <i class="fas fa-bolt mr-2 text-yellow-400"></i>
                    <span class="text-lg font-medium">共享米宝管理系统</span>
                </div>
                
                <nav>
                    <a href="index.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-chart-line mr-2"></i> 控制台
                    </a>
                    <a href="users.html" class="block py-2 px-4 rounded bg-gray-700 mb-1">
                        <i class="fas fa-users mr-2"></i> 用户管理
                    </a>
                    <a href="investors.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-user-tie mr-2"></i> 投资人管理
                    </a>
                    <a href="devices.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-battery-full mr-2"></i> 设备管理
                    </a>
                    <a href="revenue.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-money-bill-wave mr-2"></i> 收益管理
                    </a>
                    <a href="commission-settings.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-cog mr-2"></i> 分润设置
                    </a>
                </nav>
            </div>
        </div>

        <!-- Main content -->
        <div class="flex-grow">
            <!-- Header -->
            <header class="bg-white shadow-sm">
                <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                    <h1 class="text-xl font-medium">用户管理</h1>
                    <div class="flex items-center">
                        <span class="mr-4">管理员</span>
                        <img class="h-8 w-8 rounded-full" src="https://via.placeholder.com/40" alt="管理员头像">
                    </div>
                </div>
            </header>

            <!-- Page content -->
            <main class="container mx-auto p-4">
                <!-- Search and Filter -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex flex-wrap gap-4">
                        <!-- Search by User -->
                        <div class="flex-grow min-w-[250px]">
                            <label class="block text-sm text-gray-600 mb-1">用户搜索</label>
                            <div class="flex">
                                <input type="text" class="w-full border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="手机号/ID/姓名">
                                <button class="bg-blue-500 text-white px-4 py-2 rounded-r-md">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Filter by Registration Date -->
                        <div class="w-48">
                            <label class="block text-sm text-gray-600 mb-1">注册时间</label>
                            <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">全部时间</option>
                                <option value="last7days">最近7天</option>
                                <option value="last30days">最近30天</option>
                                <option value="last3months">最近3个月</option>
                                <option value="custom">自定义</option>
                            </select>
                        </div>

                        <!-- Filter by User Type -->
                        <div class="w-48">
                            <label class="block text-sm text-gray-600 mb-1">用户类型</label>
                            <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">全部类型</option>
                                <option value="normal">普通用户</option>
                                <option value="investor">投资人</option>
                                <option value="recruiter">招商人</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- User List -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-lg font-medium">用户列表</h2>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户信息</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">推荐人</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">来源</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">钱包余额</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">已交押金</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">租借次数</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">消费总额</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">投资收益</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">储值卡余额</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">储值卡赠额</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">注册日期</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <!-- User 1 -->
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img class="h-10 w-10 rounded-full mr-3" src="https://via.placeholder.com/40" alt="用户头像">
                                            <div>
                                                <div class="text-sm font-medium">王小明</div>
                                                <div class="text-xs text-gray-500">13912345678</div>
                                                <div class="text-xs text-gray-500">ID: U20230501</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">--</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">微信</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥120.50</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥100.00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">12次</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥256.00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥18.50</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥50.00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥5.00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-05-01</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="#" class="text-blue-500 mr-3 user-detail-btn">详情</a>
                                        <a href="#" class="text-blue-500 user-edit-btn">编辑</a>
                                    </td>
                                </tr>

                                <!-- User 2 -->
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img class="h-10 w-10 rounded-full mr-3" src="https://via.placeholder.com/40" alt="用户头像">
                                            <div>
                                                <div class="text-sm font-medium">李小红</div>
                                                <div class="text-xs text-gray-500">13987654321</div>
                                                <div class="text-xs text-gray-500">ID: U20230415</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <div class="text-sm">王大明</div>
                                        <div class="text-xs text-gray-500">UID: U20230301</div>
                                        <div class="text-xs text-gray-500">手机: 13888889999</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">支付宝</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥85.20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥100.00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">8次</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥128.50</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥235.60</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥100.00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥10.00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-04-15</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="#" class="text-blue-500 mr-3 user-detail-btn">详情</a>
                                        <a href="#" class="text-blue-500 user-edit-btn">编辑</a>
                                    </td>
                                </tr>

                                <!-- User 3 -->
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img class="h-10 w-10 rounded-full mr-3" src="https://via.placeholder.com/40" alt="用户头像">
                                            <div>
                                                <div class="text-sm font-medium">张志强</div>
                                                <div class="text-xs text-gray-500">13866668888</div>
                                                <div class="text-xs text-gray-500">ID: U20230402</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <div class="text-sm">李小红</div>
                                        <div class="text-xs text-gray-500">UID: U20230415</div>
                                        <div class="text-xs text-gray-500">手机: 13987654321</div>
                                    </td>
                               
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">微信</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥350.00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥100.00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">0次</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥0.00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥1,280.50</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥0.00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">¥0.00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-04-02</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="#" class="text-blue-500 mr-3 user-detail-btn">详情</a>
                                        <a href="#" class="text-blue-500 user-edit-btn">编辑</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="flex justify-between items-center mt-6">
                        <div class="text-sm text-gray-500">
                            显示 1-10 条，共 157 条
                        </div>
                        <div class="flex space-x-1">
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-gray-50">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-blue-500 text-white">
                                1
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                2
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                3
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                4
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                5
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-gray-50">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- User Detail Modal -->
                <div id="user-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
                    <div class="bg-white rounded-lg p-6 max-w-md w-full">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">用户详情</h3>
                            <button id="close-detail-modal" class="text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <!-- User basic info -->
                            <div class="flex items-center">
                                <img class="h-16 w-16 rounded-full mr-4" src="https://via.placeholder.com/80" alt="用户头像">
                                <div>
                                    <div class="text-lg font-medium">王小明</div>
                                    <div class="text-sm text-gray-500">ID: U20230501</div>
                                    <div class="text-sm text-gray-500">手机: 13912345678</div>
                                </div>
                            </div>
                            
                            <!-- User detailed info -->
                            <div class="border-t pt-4">
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <div class="text-sm text-gray-500">注册时间</div>
                                        <div class="font-medium">2023-05-01</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">账户状态</div>
                                        <div class="font-medium">正常</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">用户类型</div>
                                        <div class="font-medium">普通用户</div>
                                    </div>
                                  
                                    <div>
                                        <div class="text-sm text-gray-500">推荐人</div>
                                        <div class="font-medium">--</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">累计消费</div>
                                        <div class="font-medium">¥256.00</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">累计收益</div>
                                        <div class="font-medium text-green-600">¥18.50</div>
                                    </div>
                                </div>
                            </div>
                            
                           
                            
                            <!-- User Actions -->
                            <div class="border-t pt-4 flex justify-end space-x-2">
                                <button id="close-detail-btn" class="px-4 py-2 border border-gray-300 rounded-md text-sm">
                                    关闭
                                </button>
                                <button class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm">
                                    编辑信息
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- User Edit Modal -->
                <div id="user-edit-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
                    <div class="bg-white rounded-lg p-6 max-w-md w-full">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">编辑用户</h3>
                            <button id="close-edit-modal" class="text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">姓名</label>
                                <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" value="王小明">
                            </div>
                            
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">手机号码</label>
                                <input type="tel" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" value="13912345678">
                            </div>
                            
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">账户状态</label>
                                <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="normal">正常</option>
                                    <option value="disabled">禁用</option>
                                    <option value="frozen">冻结</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">推荐人</label>
                                <div class="flex">
                                    <input type="text" id="referrer-search" class="w-full border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="输入UID/手机号">
                                    <button id="search-referrer-btn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-r-md">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                                <div id="referrer-info" class="mt-2 p-2 border border-gray-300 rounded-md hidden">
                                    <div class="flex items-center">
                                        <img class="h-8 w-8 rounded-full mr-2" src="https://via.placeholder.com/32" alt="推荐人头像">
                                        <div>
                                            <div class="text-sm font-medium" id="selected-referrer-name">未选择推荐人</div>
                                            <div class="text-xs text-gray-500" id="selected-referrer-id">UID: -</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-2 text-xs text-gray-500">
                                    注意：每个用户默认都有资格成为分享人，投资人身份在投资人管理中设置。
                                </div>
                            </div>
                            
                            <div class="flex justify-end space-x-2 pt-4">
                                <button id="cancel-edit-btn" class="px-4 py-2 border border-gray-300 rounded-md text-sm">
                                    取消
                                </button>
                                <button id="save-user-btn" class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm">
                                    保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- JavaScript for functionality -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // User detail modal
            const userDetailModal = document.getElementById('user-detail-modal');
            const userDetailBtns = document.querySelectorAll('.user-detail-btn');
            const closeDetailModal = document.getElementById('close-detail-modal');
            const closeDetailBtn = document.getElementById('close-detail-btn');
            
            // User edit modal
            const userEditModal = document.getElementById('user-edit-modal');
            const userEditBtns = document.querySelectorAll('.user-edit-btn');
            const closeEditModal = document.getElementById('close-edit-modal');
            const cancelEditBtn = document.getElementById('cancel-edit-btn');
            const saveUserBtn = document.getElementById('save-user-btn');
            
            // Referrer elements
            const referrerSearchInput = document.getElementById('referrer-search');
            const searchReferrerBtn = document.getElementById('search-referrer-btn');
            const referrerInfo = document.getElementById('referrer-info');
            const selectedReferrerName = document.getElementById('selected-referrer-name');
            const selectedReferrerId = document.getElementById('selected-referrer-id');
            
            // 推荐人搜索功能
            searchReferrerBtn.addEventListener('click', function() {
                const searchValue = referrerSearchInput.value.trim();
                if (!searchValue) {
                    alert('请输入UID或手机号');
                    return;
                }
                
                // 模拟API调用
                console.log(`搜索推荐人: ${searchValue}`);
                // 实际项目中应该调用后端API查询用户
                setTimeout(() => {
                    // 模拟找到用户
                    referrerInfo.classList.remove('hidden');
                    selectedReferrerName.textContent = `推荐人_${searchValue}`;
                    selectedReferrerId.textContent = `UID: ${searchValue}`;
                }, 300);
            });
            
            // Show detail modal
            userDetailBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    userDetailModal.classList.remove('hidden');
                });
            });
            
            // Hide detail modal
            function hideDetailModal() {
                userDetailModal.classList.add('hidden');
            }
            
            closeDetailModal.addEventListener('click', hideDetailModal);
            closeDetailBtn.addEventListener('click', hideDetailModal);
            
            // Show edit modal
            userEditBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    userEditModal.classList.remove('hidden');
                });
            });
            
            // Hide edit modal
            function hideEditModal() {
                userEditModal.classList.add('hidden');
            }
            
            closeEditModal.addEventListener('click', hideEditModal);
            cancelEditBtn.addEventListener('click', hideEditModal);
            
            // Save user button
            saveUserBtn.addEventListener('click', function() {
                // 获取推荐人信息
                const referrer = referrerInfo.classList.contains('hidden') ? null : {
                    id: selectedReferrerId.textContent.replace('UID: ', ''),
                    name: selectedReferrerName.textContent
                };
                
                // 收集表单数据
                const userData = {
                    name: document.querySelector('input[type="text"]').value,
                    phone: document.querySelector('input[type="tel"]').value,
                    status: document.querySelector('select').value,
                    referrer: referrer
                };
                
                console.log('保存用户数据:', userData);
                // 实际项目中应该调用后端API保存数据
                hideEditModal();
                alert('用户信息已更新！');
            });
        });
    </script>
</body>
</html> 